<template>
	<view class="store">
		<view class="address">
			<view class="item" :class="level==1?'active':''" @click="getData(1)">{{pName}}</view>
			<view class="item" :class="level==2?'active':''" @click="getData(2)">{{cName}}</view>
			<view class="item" :class="level==3?'active':''" @click="getData(3)">{{dName}}</view>
			<uni-icons type="search" @click="getStoreList"></uni-icons>
		</view>
		<view class="address-box">
			<view class="list-item" v-for="s in storeList" :key="s.id">
				<view class="storeInfo" @click="setstore(s)">
					<view class="storeName">{{s.name}}</view>
					<view class="storeDesc">{{s.address}}</view>
				</view>
				<view class="position" @click="positions(s)">
					<image src="../../static/img/1/icon-dingwei@2x.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="chooseData">
				<view class="title">请选择地区</view>
				<scroll-view class="data-list" scroll-y>
					<view class="list-item" v-for="l in list" :key="l.regionCode" @click="setData(l)">
						{{l.name}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				provinces: [],
				citys: [],
				district: [],
				pid: '',
				cid: '',
				did: '',
				pName: '选择省',
				cName: '选择市',
				dName: '选择区',
				storeList: [],
				level: 0,
				list: '',
				type:''
			}
		},
		onLoad() {
			this.pName = '云南'
			this.cName = '昆明市'
			this.dName = '选择区'
			this.pid = "530000"
			this.cid = "530100"
			this.level = 3
			// this.getData(2)
			// this.getData(3)
			this.getStoreList()
		},
		methods: {
			//获取省数据
			getprovince() {
				this.$Request.get(this.$api.httpApi.address.getProvinces).then(res => {
					if (res.code == 200) {
						this.list = res.data
					}
				})
			},
			//获取市数据
			getcity(parentId) {
				this.$Request.get(this.$api.httpApi.address.getCitysFromProvince + '&parentId=' + parentId).then(res => {
					if (res.code == 200) {
						this.list = res.data
					}
				})
			},
			//获取区数据
			getTownArr(parentId) {
				this.$Request.get(this.$api.httpApi.address.getDistrictFromCity + '&parentId=' + parentId).then(res => {
					if (res.code == 200) {
						this.list = res.data
					}
				})

			},
			getData(lv) {
				this.$refs.popup.open()
				this.level = lv
				if (lv == 1) {
					this.getprovince()
					
				} else if (lv == 2) {
					this.getcity(this.pid)
					
				} else {
					this.getTownArr(this.cid)
				}
			},
			setData(item) {
				if (this.level == 1) {
					this.pid = item.regionCode
					this.pName = item.name
					this.cName = '选择市'
					this.cid = ''
					this.dName = '选择区'
					this.did = ''
				} else if (this.level == 2) {
					this.cid = item.regionCode
					this.cName = item.name
					this.dName = '选择区'
					this.did = ''
				} else {
					this.did = item.regionCode
					this.dName = item.name
				}
				this.$refs.popup.close()
			},
			getStoreList() {
				let addressData = {
					"province": this.pName,
					"city": this.cName,
					"area": this.dName,
				}
				this.$Request.post(this.$api.httpApi.order.getStoreList, addressData).then(res => {
					if (res.code == 200) {
						this.storeList = res.data
					}
				})

			},
			positions(data){
				let p = JSON.stringify(data)
				uni.navigateTo({
					url:`/pages/order/map?address=${p}`
				})
			},
			setstore(item){
				this.$api.prePage().setStore(item)
				
				
				uni.navigateBack()
			}
		}


	}
</script>

<style scoped lang="less">
	page {
		background: #F6F6F6;
	}

	.store {
		.address {
			margin-top: 10upx;
			width: 100%;
			height: 78upx;
			background: rgba(255, 255, 255, 1);
			padding: 0 70upx 0 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				height: 100%;
				width: 104upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 23upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);

				&.active {
					border-bottom: 1px solid #F0406F;
				}

			}
		}

		.address-box {
			display: flex;
			flex-direction: column;

			.list-item {
				width: 100%;
				height: 130upx;
				margin-top: 10upx;
				background: rgba(255, 255, 255, 1);
				padding: 0 20upx 0 40upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.storeInfo {
					width: 70%;
					height: 100%;
					display: flex;
					// align-items: center;
					justify-content: center;
					flex-direction: column;
					.storeName {
						font-size: 21upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);

					}

					.storeDesc {
						font-size: 21upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(187, 187, 187, 1);
					}
				}

				.position {
					height: 100%;
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					image {
						width: 30upx;
						height: 36upx;
					}
				}
			}
		}
	}

	.chooseData {
		width: 653upx;
		height: 804upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
		display: flex;
		flex-direction: column;

		.title {
			height: 76upx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 0 47upx;
			font-size: 23upx;
			font-family: NotoSansSChineseRegular;
			font-weight: 400;
			color: rgba(187, 187, 187, 1);
		}

		.data-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			height: 728upx;
			.list-item {
				height: 76upx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 0 47upx;
				font-size: 23upx;
				font-family: NotoSansSChineseRegular;
				font-weight: 400;
				color: rgba(34, 34, 34, 1);
				border-top: 1px solid #F5F5F5;
			}
		}
	}
</style>
